<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>v-model指令</title>
</head>

<body>
  <div id="app">
   <input  type="text" value="搜索" v-model="query" @keyup.enter="search">
   <h2>{{query}}</h2>
  </div>

  <!-- 导入开发版本的Vue.js  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        // 查询关键字
        query: "王力宏",
      },
      methods: {
        search:function(){
          console.log(this.query);
        },
      }
    });  
  </script>
</body>

</html>